<template>
 <pageTabelLayout>
    <template #pageHeader>
    <div class="search-form isheader">
        <div>
            <a-form size="small" :model="searchData" layout="inline" style="margin-left: 10px;">
                <a-form-item label="车牌号">
                    <a-select popup-container="html"  class="bacClass" :style="{ width: '10rem' }" placeholder="" v-model="searchData.vehicleNo"
                        allow-clear>
                        <a-option v-for="item in vehicleList" :value="item.licensePlateName">
                            {{ item.licensePlateName }}
                        </a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="送货人">
                    <a-input allow-clear :style="{ width: '160px' }" class="bacClass" v-model="searchData.deliveryMan
                        " />
                </a-form-item>
                <a-form-item label="出车时间">
                    <a-range-picker  popup-container="html"  show-time format="YYYY-MM-DD HH:mm:ss" class="bacClass" @change="pickerChange"
                        style="width: 254px;" v-model="searchData.outTime" />
                </a-form-item>
            </a-form>
        </div>
        <div>
            <Toolbar :items="['查询', '新增', '删除']" @select="loadVehicleRecords" @del="delVehicleRecord"
                @add="vehFormData.showForm = true"></Toolbar>
        </div>
    </div>
    <div class="my-divisders">
        <a-divider orientation="center">
            <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
            <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
    </div>
</template>

    <template #pageTabel>
        <a-tabs   :lazy-load="true" type="card" :justify="true" :default-active-key="tabsKeys">
            <a-tab-pane title="车辆运输记录" :key="1" style="padding-top: 0;">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" :suppressDragLeaveHidesColumns="true" @grid-ready="gridReady"
                style="height: calc(100% - 45px);" @columnResized="onColumnResized" @columnMoved="onColumnMoved"
                    @columnVisible="onColumnVisible" :defaultColDef="defaultColDef" class='ag-theme-alpine'
                    :rowData="tableDataList" :columnDefs="vehicleColDefs" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :page-size-options="pagingList1" :total="searchData.total" show-total show-jumper
                    @change="pageChange" style="justify-content: center" :page-size="10" :current="searchData.current" />
            </a-tab-pane>
        </a-tabs>
    </template>

    <a-modal v-model:visible="vehFormData.showForm" :width="400" @ok="saveVehicleRecord">
        <template #title> 车辆运输记录新增 </template>
        <a-form ref="formRef" :model="vehFormData" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
            <a-form-item label="车牌号" field="vehicleNo" label-col-flex="80px"
                :rules="[{ required: true, message: '车牌号必选' }]">
                <a-select popup-container="html"  class="bacClass" :style="{ width: '220px' }" placeholder="" v-model="vehFormData.vehicleNo"
                    allow-clear>
                    <a-option v-for="item in vehicleList" :value="item.licensePlateName">
                        {{ item.licensePlateName }}
                    </a-option>
                </a-select>
            </a-form-item>
            <a-form-item label="送货人" field="deliveryMan" label-col-flex="80px"
                :rules="[{ required: true, message: '送货人必填' }]">
                <a-input allow-clear :style="{ width: '220px' }" class="bacClass" v-model="vehFormData.deliveryMan" />
            </a-form-item>
            <a-form-item label="线路名称" field="routeName" label-col-flex="80px"
                :rules="[{ required: true, message: '线路名称必填' }]">
                <a-input allow-clear :style="{ width: '220px' }" class="bacClass" v-model="vehFormData.routeName" />
            </a-form-item>
            <a-form-item label="出车条数" field="startCount" label-col-flex="80px"
                :rules="[{ required: true, message: '出车条数必填' }]">
                <a-input-number allow-clear :style="{ width: '220px' }" class="bacClass" v-model="vehFormData.startCount" />
            </a-form-item>
            <a-form-item label="回车条数" field="backCount" label-col-flex="80px"
                :rules="[{ required: true, message: '回车条数必填' }]">
                <a-input-number allow-clear :style="{ width: '220px' }" class="bacClass" v-model="vehFormData.backCount" />
            </a-form-item>
            <a-form-item label="出车时间" field="startTime" label-col-flex="80px"
                :rules="[{ required: true, message: '出车时间必填' }]">
                <a-date-picker  popup-container="html"  style="width: 220px;" show-time format="YYYY-MM-DD HH:mm:ss"
                    v-model="vehFormData.startTime" />
            </a-form-item>
            <a-form-item label="回车时间" label-col-flex="80px">
                <a-date-picker  popup-container="html"  style="width: 220px;" show-time format="YYYY-MM-DD HH:mm:ss"
                    v-model="vehFormData.backTime" />
            </a-form-item>
        </a-form>
    </a-modal>
</pageTabelLayout>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import { post, get } from "@/api/http"
import { localeText } from '@/api/aggridZw'

import Toolbar from "@/components/Toolbar.vue"
import { Message, Modal } from "@arco-design/web-vue"
import { FormInstance } from "@arco-design/web-vue/es/form";
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import { pagingList } from '@/api/paging'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
const headerShow = ref(true)
const localeText1: any = ref(localeText)
const tableDataList = ref([])
const pagingList1: any = ref(pagingList)



const pageData = reactive({
    showAdd: false,
    showDetails: false,
    isShow: false,
    rHeight: 0,
})


const searchData = reactive({
    vehicleNo: null,
    deliveryMan: null,
    outTime: null,
    beginTime: null,
    endTime: null,
    total: 10,
    current: 1,
    size: 10
})

const vehFormData = reactive({
    showForm: false,
    routeId: null,
    routeName: null,
    vehicleNo: null,
    deliveryMan: null,
    startCount: null,
    backCount: null,
    startTime: null,
    backTime: null
})


const vehicleList = ref([{
    id: null,
    licensePlateName: ''
}])


const pickerChange = (dateString, value) => {
    if (dateString) {
        searchData.beginTime = dateString[0];
        searchData.endTime = dateString[1];
    } else {
        searchData.beginTime = '';
        searchData.endTime = '';
    }
}


const loadVehicleNoList = () => {
    post({
        url: 'dict/licensePlate/listAll',
        data: {}
    }).then(({ code, data }) => {
        if (code === 200) {
            vehicleList.value = data
        }
    })
}

onMounted(() => {
    loadVehicleRecords();
    post({
        url: 'wms/dyeProductInstock/fetchUserInfoByToken',
        data: {}
    }).then(({ code, message, data }) => {
        if (code === 200) {
            //formData.companyId = data.firmId;
            searchData.companyId = data.firmId;
            loadVehicleNoList();
            loadVehicleRecords();
        } else {
            Message.error({
                content: message,
                duration: 5000,
            });
        }
    })
});




const gridOptions = ref()
const colState = ref()
const gridReady = (params: any) => {
    gridOptions.value = params.api;
    colState.value = params.columnApi
}

const loadVehicleRecords = () => {
    updateGridState01()
    post({
        url: 'dict/vehicleRecord/findPagedVehicleRecords',
        data: searchData
    }).then(({ code, data }) => {
        if (code === 200) {
            gridOptions.value.setRowData(data.records);
            searchData.total = data.total;
        }
    })
}



const formRef = ref<FormInstance>();
const saveVehicleRecord = () => {
    formRef.value?.validate().then((err) => {
        console.log(err);
        if (!err) {
            post({
                url: 'dict/vehicleRecord/insertVehicleRecord',
                data: vehFormData
            }).then(({ code, data }) => {
                if (code === 200) {
                    Message.success({
                        content: "删除成功",
                        duration: 5000,
                    });
                    loadVehicleRecords();
                }
            })
        } else {
            vehFormData.showForm = true;
        }
    });

}




const delVehicleRecord = () => {
    let rowIds = gridOptions.value.getSelectedRows().map((item) => item.id)
    if (rowIds.length === 0) {
        Message.warning("请选择要删除的数据！");
        return;
    }
    Modal.confirm({
        title: "系统提示",
        content: "确认删除此数据?",
        onOk() {
            post({
                url: 'dict/vehicleRecord/delVehicleRecords',
                data: rowIds
            }).then(({ code, data }) => {
                if (code === 200) {
                    Message.success({
                        content: "删除成功",
                        duration: 5000,
                    });
                    loadVehicleRecords();
                }
            })
        }
    });

}


const pageChange = (val: any) => {
    searchData.current = val;
    loadVehicleRecords();
}



const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
}


const vehicleColDefs = [
    {
        showRowGroup: 'hide_def',
        "headerName": "",
        "checkboxSelection": true,
        "pinned": "left",
        "width": 50,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: "left",
    },
    {
        headerName: '记录单号',
        field: 'recordNo',
        width: 200
    },
    {
        headerName: '送货车号',
        field: 'vehicleNo',
        width: 200
    },
    {
        headerName: '送货人',
        field: 'deliveryMan',
        width: 200
    },
    {
        headerName: '路线名称',
        field: 'routeName',
        width: 200
    },
    {
        headerName: '出车条数',
        field: 'startCount',
        width: 200
    },
    {
        headerName: '回车条数',
        field: 'backCount',
        width: 200
    },
    {
        headerName: '出车时间',
        field: 'startTime',
        width: 200
    },
    {
        headerName: '回车时间',
        field: 'backTime',
        width: 204
    }
]

const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('VehicleRecords-1', gridOptions, colState, vehicleColDefs)
const onColumnMoved = () => {
    saveGridState01()
}
const onColumnResized = () => {
    saveGridState01()
}
const onColumnVisible = () => {
    saveGridState01()
}


</script>
<script lang="ts">
export default {
    name: "VehicleRecords",
}
</script>

<style scoped>
.arco-select-dropdown {
    width: 150px;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}
</style>



